<template>
  <div class="dyna-table">
      <Introduce title="动态表格">
          <template #introduce>
              动态表格,可以动态控制表格列
          </template>
      </Introduce>
      <el-checkbox-group class="check-group" v-model="checked" @change="change">
        <el-checkbox label="studentnumber">
            学号
        </el-checkbox>
        <el-checkbox label="name">
            姓名
        </el-checkbox>
        <el-checkbox label="gender">
            性别
        </el-checkbox>
         <el-checkbox label="score">
            分数
        </el-checkbox>
         <el-checkbox label="state">
            状态
        </el-checkbox>
         <el-checkbox label="address">
            地址
        </el-checkbox>
         <el-checkbox label="date">
            日期
        </el-checkbox>
      </el-checkbox-group>
      <el-table ref="dragTable" :data="studentList"  v-loading="load" >
          <el-table-column v-for="(item,index) in column" :key="index" :label="item.value">
              <template #default="scope">
                  {{scope.row[item.key]}}
              </template>
          </el-table-column>
      </el-table>
  </div>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import {queryStudent} from '../../../api/student'
export default {
    setup(){
        /** 变量定义部分 **/
        //表格数据
        let studentList = ref([])
        //加载标志
        let load = ref(false)

        let checked = ref([])

        let column = ref([])

        const template = [
             {
                key: 'studentnumber',
                value: '学号'
            },
            {
                key: 'name',
                value: '姓名'
            },
            {
                key: 'gender',
                value: '性别'
            },
            {
                key: 'score',
                value: '总分数'
            },
            {
                key: 'state',
                value: '状态'
            },
            {
                key: 'address',
                value: '地址'
            },
            {
                key: 'date',
                value: '日期'
            }
        ]

        onMounted(()=>{
            initChecked()
            getStudent()
        })

        const change = (val)=>{
            column.value = template.filter(res=>{
                for(const item of val){
                    if(res.key == item){
                        return true
                    }
                }
                return false
            })
        }

        const initChecked = ()=>{
            const data = template.map(val=>{
                return val.key
            })
            checked.value = [...data]
            column.value = template
        }

        /**数据请求部分**/
       //请求学生数据
       const getStudent = ()=>{
           load.value = true
            queryStudent(1,15).then(res=>{
                res = res.data
                studentList.value = res.data.list
                load.value = false
            })
       }

       return {studentList,load,getStudent,column,checked,change}
    }
}
</script>

<style lang="scss" scoped>
.dyna-table{
    .check-group{
        background: #fff;
        padding: 10px 20px;
    }
}
</style>